<template>
    <div v-loading='detailLoading' class="p_20">
        <el-form :model="form" :rules="rules" ref="reForm" label-width="120px" label-position="left" class="mb_40">
            <!-- <el-form-item label="拉入回收站：" prop="cycle">
                    <el-select v-model="form.cycle" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
            </el-form-item> -->
            <div class="flex full_w">
                <Citys v-if="!detailLoading" ref="citys" :info='citysParams' />
            </div>
            <el-form-item label="地区级别：" prop="active_level">
                <el-select v-model="form.active_level" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in levelList"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="主办方：" v-for="(item,index) in form.co_sponsor" :key="index" 
                :prop="'co_sponsor.'+index+'.value'" 
                :rules="{required: true, message: '主办方不能为空', trigger: 'blur'}">
                <el-input v-model="item.value"  placeholder="请输入主办方" style="width:90%" />
                <i v-if="index==0" class="el-icon-circle-plus addicons" @click="addSponer"></i>
                <i v-if="index!==0" class="el-icon-remove addicons" style="color:red" @click="delesponer(index)"></i>
            </el-form-item>
            <el-form-item label="协办方：" prop="sponsor">
                <el-input v-model="form.sponsor" placeholder="请输入协办方" />
            </el-form-item>
            <div class="flexrowbetween mtb_15">
                <div class="header_title">联系信息：</div>
                <el-button type="primary" size="mini" @click="addInfo">添加</el-button>
            </div>
            <el-row v-for="(item,index) in form.contacts" :key="index+'userInfoarr'">
                <el-col :span="12">
                    <!-- :rules="{ required: true, message: '联系人不能为空', trigger: 'blur'}" -->
                    <el-form-item label="联系人：" :prop="'contacts.'+index+'.username'"  >
                        <el-input v-model="item.username"  placeholder="联系人" style="width:90%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!-- :rules="{ required: true, message: '联系电话不能为空', trigger: 'blur'}" -->
                    <el-form-item label="联系电话：" :prop="'contacts.'+index+'.phone'" >
                        <el-input v-model="item.phone"  placeholder="联系电话" style="width:85%"  />
                        <span v-if="index!==0" class="closebox" style="width:15%"><i class="el-icon-close closeicon commhover" @click="deletUserItem(index)"></i></span>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-form-item label="活动联系人：" prop="username">
                <el-input v-model="form.username" placeholder="请输入活动联系人" />
            </el-form-item>
            <el-form-item label="联系方式：" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系方式" />
            </el-form-item> -->
            <el-form-item label="活动时间：">
                <template slot="label">
                    <span><span class="redcolor">*</span>活动时间：</span>
                </template>
                <el-date-picker
                    v-model="zjTimes"
                    style="width:100%"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="活动提醒时间：" prop="time">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.time" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="活动链接：" prop="url">
                <el-input v-model="form.url" placeholder="请输入活动链接" />
            </el-form-item>
            <el-form-item label="标题：" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="活动类型：" prop="active_class">
                <el-select v-model="form.active_class" placeholder="请选择" >
                    <el-option v-for="item in classList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="活动票数：" prop="num">
                <el-input v-model="form.num" placeholder="请输入活动票数" />
            </el-form-item> -->
        </el-form>
        <div class="dialog-userfooter">
            <el-button @click="handleCancle">取 消</el-button>
            <el-button type="primary" @click="handleSave">保 存</el-button>
        </div>
    </div>
</template>
<script>
import { resourceEdit,urlcheck } from '@/api/resource';
import Citys from '@/components/Citys';
import { levelList } from '@/api/datalist';
// 拿到审核通过的数据
import { checksuccesslist } from '@/api/approval'

export default {
    components:{
        Citys
    },
    data(){
        let validNum = (rule, value,callback)=>{
            if (!value){
                callback()
            }else  if (/[^0-9]/g.test(value)){
                callback(new Error('请输入正整数'))
            }else {
                callback()
            }
        }
        // let validUrl=(rule,value,callback)=>{
            

        // }
        return {
            detailLoading:false,
            form:{
                id:13,
                province:'',
                city:'',
                area:'',
                active_level:'',
                sponsor:'',
                co_sponsor:[{value:''}],
                time:'',
                title:"",
                active_class:'',
                // num:'',
                startime:'',
                endtime:'',
                url:'',
                contacts:[{username:"",phone:""}],
                // username:'',
                // phone:''
            },
            rules:{
                active_level:[{ required: true, message: '请输入地区级别', trigger: 'blur' }],
                sponsor:[{message: '请输入协办方信息', trigger: 'blur' }],
                time:[{ required: true, message: '请选择提醒时间', trigger: 'change' }],
                url:[{ required: true,  message: '请输入活动链接', trigger: 'blur' }],
                title:[{ required: true, message: '请输入活动标题', trigger: 'blur' }],
                active_class:[{ required: true, message: '请选择活动类型', trigger: 'change' }],
                // num:[{ validator:validNum,trigger: 'change' }]
            },
            citysParams:{},
            levelList:levelList,
            classList:[],
            zjTimes:[],
            url:"",
        }
    },

    created(){
        // 活动类型
        this.getDicts('/task/index/active_class').then(res=>{
            this.classList = res.data;
        });
        console.log('rowinfo:',this.rowinfo);
        this.url = this.rowinfo.url;
        this.form.id=this.rowinfo.id;
        this.citysParams={
            province:this.rowinfo.province,
            city:this.rowinfo.city,
            area:this.rowinfo.area,
        }
        this.form.active_level=this.rowinfo.active_level==0?'':this.rowinfo.active_level;
        this.form.sponsor=this.rowinfo.sponsor?this.rowinfo.sponsor.sponsor:'';
        this.form.co_sponsor=this.rowinfo.cosponsor&&this.rowinfo.cosponsor.length?this.rowinfo.cosponsor.map(item=>({value:item.co_sponsor})):[{value:""}];
        this.form.contacts=this.rowinfo.contacts&&this.rowinfo.contacts.length?this.rowinfo.contacts:[{username:"",phone:""}];
        this.form.time=this.rowinfo.time=='1970-01-01'?'':this.rowinfo.time;
        this.form.title=this.rowinfo.title;
        this.form.active_class=this.rowinfo.active_class==0?'':this.rowinfo.active_class;
        // this.form.num=this.rowinfo.num;
        this.form.url=this.rowinfo.url;
        this.form.username=this.rowinfo.username;
        this.form.phone=this.rowinfo.phone;
        this.zjTimes=Array.isArray(this.rowinfo.tp_arr)?this.rowinfo.tp_arr:[];
    },

    props:{
        rowinfo:{
            type:Object,
            default:null
        },
        type:{
            type:Number,
            default:1
        }
    },

    methods:{

        addSponer(){
            this.form.co_sponsor.push({value:''});
        },

        delesponer(index){
            this.form.co_sponsor.splice(index,1);
        },

        addInfo(){
            this.form.contacts.push({
                username:"",
                phone:'',
            })
        },

        deletUserItem(index){
            this.form.contacts.splice(index,1);
        },
        
        handleSave(){
            // console.log('this.$refs.citys');
            let citys = false,form = false;
            this.$refs.citys.$refs.formrule.validate(valid=>{
                console.log(valid);
                citys=valid;
            })
            this.$refs.reForm.validate(valid=>{
                console.log(valid);

                form = valid
            })
            if(!citys||!form) return;
            if(!this.zjTimes||!this.zjTimes.length){
                this.$message.warning('请选择活动时间');
                return;
            }
            this.form.startime=this.zjTimes[0];
            this.form.endtime=this.zjTimes[1];
            this.form.province = this.$refs.citys.form.province;
            if(this.$refs.citys.form.city){
                this.form.city = this.$refs.citys.form.city.split('_')[0];
            }
            let area = '';
            if(this.$refs.citys.form.area){
                area = this.$refs.citys.form.area.split('_')[0];
            }
            this.form.area = area;
            console.log('this.form:',this.form);
            let params = {...this.form,co_sponsor:this.form.co_sponsor.map(item=>item.value)}
            urlcheck({url:this.form.url}).then(res=>{
                if(res.code == 1){
                    resourceEdit(params).then(res=>{
                        if(res.code == 1){
                            this.$message.success('编辑成功');
                            this.$router.back();
                            this.handleCancle(1)
                        }
                    })
                }
            })
            
        },

        handleCancle(type){
            this.$emit('close',type)
        },
    }
}
</script>
<style lang="scss" scoped>
.addicons{
    font-size: 18px;
    display: inline-block;
    margin-left: 6px;
    color: #409eff;
}
.header_title{
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.closeicon{
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
.closebox{
  width: 10%;
  display: inline-block;
  text-align: center;
}
.browserpng{
  width: 20px;
  height: 20px;
  margin-top: 5px;
  margin-left: 15px;
}
.abox{
    margin-top: 2px;
    display: inline-block;
}
</style>